<script setup>
import { computed, inject, onBeforeMount, ref } from 'vue'
import { IconWalletAlt, IconNotificationBell, IconCarShipping, IconUser, IconGoldMedal, IconCaretRight } from '../icon/index.js'
//消息提示工具
import { DlMessageBox } from '../util/messagebox.js'

//引入 api
import { userLogOutFun } from '../api/user.js'

//登录用户缓存
const loginUser = inject('loginUser');
//主页底部菜单
const menuCore = inject('menuCore');
const homeMenuBar = inject('homeMenuBar');
const viewRef = ref();

function doChangeMenu(path) {
    menuCore.push(path);
}

//是否登录
const isLogin = ref(false);
function doCheckLogin() {
    if(!loginUser.value || !loginUser.value.token) {
        //DlMessageBox.error('您还未登录,\n请先登录!');
        return;
    }
    isLogin.value = true;
}
const phoneHide = computed(()=>{//手机号处理
    return loginUser.value.phone.replace(/(\d{3})(\d{4})(\d+)/, '$1****$3');
});

const viewHeight = computed(()=>{//计算展示区域高度
    let vh = 770;
    if(viewRef.value) {
        let p = viewRef.value.parentElement;
        vh = p.offsetHeight;
    }
    if(homeMenuBar.value) {
        let h = homeMenuBar.value.offsetHeight;
        vh -= h;
    }
    return vh;
});

function doLogout() {
    //退出登录, 请求api
    if(window && window.enableDl) {
        //模拟
        DlMessageBox.success('成功退出');
        //操作成功后执行
        //清空用户状态
        localStorage.removeItem('loginUser');
        localStorage.removeItem('token');
        localStorage.removeItem('cart');
        loginUser.value = {};//清空
        isLogin.value = false;
    } else {
        userLogOutFun().then((result)=>{
            console.log('userLogOutFun result:', result);
            if(result.code == 200) {
                DlMessageBox.success(result.msg);
                //操作成功后执行
                //清空用户状态
                localStorage.removeItem('loginUser');
                localStorage.removeItem('token');
                localStorage.removeItem('cart');
                loginUser.value = {};//清空
    
                isLogin.value = false;
            } else {
                DlMessageBox.error(result.msg);
            }
        });
    }
}

function doTips () {
    DlMessageBox.warning('功能研发中...');
}

onBeforeMount(()=>{
    doCheckLogin();
});

</script>
<template>
    <div class="view-dl" :style="'height:'+viewHeight+'px'" ref="viewRef">
        
        <div class="user-list-dl">
            <div class="top-bg-dl"></div>
            <div class="user-top-box-dl">
                <div class="user-head-dl">
                    <img :src="(loginUser.headImage?loginUser.headImage:'./default.png')" alt="no image" >
                </div>
                <template v-if="isLogin">
                    <div class="user-nickname-dl">{{loginUser.nickname}}</div>
                    <div class="user-phone-dl">{{phoneHide}}</div>
                    <div class="btn-dl" @click="doLogout">退出</div>
                </template>
                <template v-else >
                    <div class="btn-dl login-dl register-dl" @click="doChangeMenu('/register')" >去注册</div>
                    <div class="btn-dl login-dl" @click="doChangeMenu('/login')" >去登录</div>
                </template>
            </div>

            <div class="menu-list-dl">
                <div class="menu-item-dl" @click="doTips">
                    <IconWalletAlt class="icon-dl"/>
                    <span class="menu-item-title-dl">我的钱包</span>
                    <IconCaretRight class="icon-dl" />
                </div>
                <div class="hr-dl"></div>
                <div class="menu-item-dl" @click="doTips">
                    <IconNotificationBell class="icon-dl"/>
                    <span class="menu-item-title-dl">我的消息</span>
                    <IconCaretRight class="icon-dl" />
                </div>
                <div class="hr-dl"></div>
                <div class="menu-item-dl" @click="doChangeMenu('/useraddr')">
                    <IconCarShipping class="icon-dl"/>
                    <span class="menu-item-title-dl">收货地址</span>
                    <IconCaretRight class="icon-dl" />
                </div>
                <div class="hr-dl"></div>
                <div class="menu-item-dl" @click="doChangeMenu('/userinfo')">
                    <IconUser class="icon-dl"/>
                    <span class="menu-item-title-dl">个人资料</span>
                    <IconCaretRight class="icon-dl" />
                </div>
            </div>

            <div class="menu-list-dl">
                <div class="menu-item-dl" @click="doTips">
                    <IconGoldMedal class="icon-dl"/>
                    <span class="menu-item-title-dl">会员中心</span>
                    <IconCaretRight class="icon-dl" />
                </div>
            </div>

        </div>

    </div>
</template>
<style scoped>
.view-dl {
    font-size: 0.4rem;
    overflow: hidden auto;
    padding-bottom: 0.1rem;
    color: #333;
}
.top-bg-dl {
    background-color: #4D98F8;
    height: 5rem;
    border-radius: 50%;
    width: 12rem;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
}

.user-list-dl {
    position: relative;
    margin-top: 1.4rem;
    padding: 0.4rem;
    text-align: center;
}

.user-top-box-dl {
    background-color: #fff;
    border-radius: 0.1rem;
    position: relative;
    padding: 1.2rem 0 0.4rem 0;
    box-shadow: 0 0.06rem 0.26rem 0.06rem #ccc;
    margin-bottom: 0.4rem;
}
.user-head-dl {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
}
.user-head-dl img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    font-size: 0.4rem;
    line-height: 1.8rem;
    display: block;
}
.user-nickname-dl {
    margin-bottom: 0.2rem;
    font-weight: bold;
    font-size: 0.6rem;
}
.user-phone-dl {
    color: #aaa;
    margin-bottom: 0.3rem;
}
.btn-dl {
    color: #fff;
    background-color: #900000;
    font-size: 0.5rem;
    padding: 0.1rem 0.6rem;
    border-radius: 0.6rem;
    display: inline-block;
    cursor: pointer;
    user-select: none;
}
.login-dl {
    margin: 0.9rem 0;
    font-size: 0.5rem;
    padding: 0.1rem 0.6rem;
}
.register-dl {
    margin-right: 0.4rem;
}
.btn-dl:hover {
    background-color: #d00000;
}

.menu-list-dl {
    background-color: #fff;
    border-radius: 0.1rem;
    padding: 0.1rem 0;
    box-shadow: 0 0.06rem 0.26rem 0.06rem #ccc;
    margin-bottom: 0.4rem;
    text-align: left;
}
.menu-list-dl .menu-item-dl {
    padding: 0.2rem;
    display: flex;
    cursor: pointer;
    margin: 0.1rem 0;
}
.hr-dl {
    margin: 0 0.2rem;
    border-bottom: 1px solid #ddd;
}
.menu-list-dl .icon-dl {
    width: 0.6rem;
    height: 0.6rem;
}
.menu-list-dl .menu-item-title-dl {
    flex: 1 1 auto;
    padding: 0 0.2rem;
}
</style>